<template>
	<div class="home">
		<!--轮播图-->
		<div class="swiper rel">
			<Loading class="abs loading" style="left: 50%;top: 50%;"></Loading>
			<Swipe :autoplay="3000" :loading="true">
				<SwipeItem v-for="(item) in soonPlayingList" :key="item.id">
					<img v-lazy="item.cover.origin" />
				</SwipeItem>
			</Swipe>
		</div>
		<!--列表-->
		<van-list :finished="nowFinished" class="list-box">
			<ul class="list">
				<li @click="toDetail(item.id)" class="item mg-top-10" v-for="(item) in nowPlayingList" :key="item.id">
					<img :src="item.cover&&item.cover.origin" />
					<div class="disc">
						<div class="text">
							<p class="film-name">{{item.name}}</p>
							<p class="count c99">{{item.cinemaCount}}家影院上映 {{item.watchCount}}购票 </p>
						</div>
						<p class="score cfc">{{item.grade}}</p>
					</div>
				</li>
				<li @click="moreFilms('now-playing')" class="more tac mg-top-20" v-if="nowFinished"><span>更多热映电影</span></li>
			</ul>
		</van-list>

		<!-- 即将上映电影列表 -->
		<van-list :finished="soonFinished" class="list-box">
			<ul class="list">
				<li class="line tac soon" v-if="soonFinished"><span>即将上映</span></li>
				<li @click="toDetail(item.id)" class="item" v-for="(item) in soonPlayingList" :key="item.id">
					<img :src="item.cover&&item.cover.origin" />
					<div class="disc">
						<div class="text">
							<p class="film-name">{{item.name}}</p>
							<p class="count c99">{{item.cinemaCount}}家影院上映 {{item.watchCount}}购票 </p>
						</div>
						<p class="score cfc">{{item.grade}}</p>
					</div>
				</li>
				<li @click="moreFilms('coming-soon')" class="more tac mg-top-15" v-if="soonFinished"><span>更多即将上映电影</span></li>
			</ul>
		</van-list>
	</div>
</template>

<script>
	import Vue from 'vue';
	// 加载vant中的组件
	import { List, Swipe, SwipeItem, Lazyload, Loading } from "vant";
	Vue.use(Lazyload);

	export default {
		components: {
			[List.name]: List,
			Swipe,
			SwipeItem,
			Loading
		},
		data() {
			return {
//				list: [],
				// 正在播放列表
				nowPlayingList: [],
				// 播放列表是否加载完毕
				nowFinished: false,
				// 即将播放
				soonPlayingList: [],
				soonFinished: false,
			};
		},
		created() {
			// 改变头部的标题
			this.$store.commit('updateTitle', '卖座电影');
			// 请求正在播放的电影列表
			this.nowPlaying();
			// 请求即将播放的电影列表
			this.soonPlaying();
		},

		methods: {
			// 获取正在播放列表
			nowPlaying() {
				const url = "/film/now-playing";
				const data = {
					page: 1,
					count: 5
				};
				this.fetch(url, data, res => {
					this.nowPlayingList = res.films;
					this.nowFinished = true;
				});
			},
			// 获取即将上映电影列表
			soonPlaying() {
				const url = "/film/coming-soon";
				const data = {
					page: 1,
					count: 3
				};
				this.fetch(url, data, res => {
					this.soonPlayingList = res.films;
					this.soonFinished = true;
				});
			},
			// 跳转到详情
			toDetail(id) {
				this.$router.push('/film/detail/' + id);
			},
			// 更多电影
			moreFilms(type) {
				this.$router.push(`/film/coming-soon`);
			}
		}
	};
</script>

<style scoped lang="less">
	.swiper {
		img {
			width: 100%;
			height: 212px;
		}
		.loading {
			left: 50%;
			top: 50%;
			margin-top: -15px;
			margin-left: -15px;
		}
	}
	
	.list {
		padding: 8px 18px 18px 18px;
	}
	
	.item {
		background: #fff;
		box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
		img {
			width: 100%;
		}
	}
	
	.disc {
		height: 50px;
		display: flex;
		justify-content: space-between;
		.text {
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding-left: 20px;
			.film-name {
				font-size: 12px;
			}
			.count {
				font-size: 8px;
				margin-top: 5px;
			}
		}
		.score {
			display: inline-flex;
			justify-content: center;
			align-items: center;
			padding-right: 20px;
		}
	}
	
	.more {
		span {
			width: 160px;
			height: 30px;
			line-height: 30px;
			display: inline-block;
			border: 1px solid #aaa;
			border-radius: 20px;
			color: #616161;
			font-size: 12px;
		}
	}
	
	.soon {
		position: relative;
		border-top: 1px solid #a7a7a7;
		margin-bottom: 30px;
	}
	
	.soon span {
		position: absolute;
		z-index: 1;
		width: 65px;
		height: 20px;
		top: 50%;
		margin-top: -10px;
		left: 50%;
		margin-left: -32px;
		display: inline-block;
		line-height: 20px;
		background: #a7a7a7;
		color: #fff;
		border: 1px solid #aaa;
		border-radius: 3px;
		font-size: 10px;
	}
</style>